<template>

  <el-container style="padding:20px 0px 0px 20px; position:absolute; left:0; top:0; width:100%;height:100%;">

    <el-header>
      <el-form :inline="true">

        <el-form-item label="激活编辑" prop="editStatus">
          <el-switch v-model="editStatus"></el-switch>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="submitUpdation()">提交修改</el-button>
        </el-form-item>

        <el-form-item style="float: right">
          <el-button type="infl" @click="returnAllSpecies()" >返回</el-button>
        </el-form-item>



      </el-form>
    </el-header>

    <el-main>

      <el-scrollbar>

        <el-col :span="24" class="toolbar">
          <el-form :model="plotData" :rules="rules" ref="ruleForm" label-width="200px">

            <el-form-item label="1-品种ID" prop="speciesId">
              <el-input v-model="plotData.speciesId"></el-input>
            </el-form-item>

            <div class="clear"></div>
            <el-form-item label="2-播种期">
              <el-date-picker
                v-model="plotData.plantingDate"
                align="right"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions1"
                :disabled="!editStatus">
              </el-date-picker>
            </el-form-item>
            <div class="clear"></div>
            <el-form-item label="3-出苗期">
              <el-date-picker
                v-model="plotData.emergenceDate"
                align="right"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions1"
                :disabled="!editStatus">
              </el-date-picker>
            </el-form-item>


            <el-form-item label="4-出苗率(%)" prop="breedingMethods">
              <el-input-number v-model="plotData.sproutRate" :min="0" :max="100" :disabled="!editStatus"
                               label="出苗率">
              </el-input-number>
            </el-form-item>

            <div class="clear"></div>
            <el-form-item label="5-现蕾期">
              <el-date-picker
                v-model="plotData.squaringStage"
                align="right"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions1"
                :disabled="!editStatus">
              </el-date-picker>
            </el-form-item>
            <div class="clear"></div>
            <el-form-item label="6-开花期">
              <el-date-picker
                v-model="plotData.blooming"
                align="right"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions1"
                :disabled="!editStatus">
              </el-date-picker>
            </el-form-item>

            <div class="clear"></div>
            <el-form-item label="7-叶颜色">
              <el-radio-group v-model="plotData.leafColour" size="small" :disabled="!editStatus">
                <el-radio-button label="浅绿"></el-radio-button>
                <el-radio-button label="绿"></el-radio-button>
                <el-radio-button label="深绿"></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <div class="clear"></div>
            <el-form-item label="8-花冠色">
              <el-radio-group v-model="plotData.corollaColour" size="small" :disabled="!editStatus">
                <el-radio-button label="白"></el-radio-button>
                <el-radio-button label="浅红"></el-radio-button>
                <el-radio-button label="红"></el-radio-button>
                <el-radio-button label="红紫"></el-radio-button>
                <el-radio-button label="紫"></el-radio-button>
                <el-radio-button label="蓝紫"></el-radio-button>
                <el-radio-button label="蓝"></el-radio-button>
                <el-radio-button label="黄"></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <div class="clear"></div>
            <el-form-item label="9-花繁茂性">
              <el-radio-group v-model="plotData.flowering" size="small" :disabled="!editStatus">
                <el-radio-button label="无"></el-radio-button>
                <el-radio-button label="少"></el-radio-button>
                <el-radio-button label="中"></el-radio-button>
                <el-radio-button label="多"></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <div class="clear"></div>
            <el-form-item label="10-茎色">
              <el-radio-group v-model="plotData.stemColour" size="small" :disabled="!editStatus">
                <el-radio-button label="绿"></el-radio-button>
                <el-radio-button label="褐"></el-radio-button>
                <el-radio-button label="紫"></el-radio-button>
                <el-radio-button label="深紫"></el-radio-button>
                <el-radio-button label="局部有紫色"></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <div class="clear"></div>
            <el-form-item label="11-天然结实性">
              <el-radio-group v-model="plotData.openpollinated" size="small" :disabled="!editStatus">
                <el-radio-button label="无"></el-radio-button>
                <el-radio-button label="弱"></el-radio-button>
                <el-radio-button label="中"></el-radio-button>
                <el-radio-button label="强"></el-radio-button>
                <el-radio-button label="极强"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <div class="clear"></div>
            <el-form-item label="12-成熟期">
              <el-date-picker
                v-model="plotData.maturingStage"
                align="right"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions1"
                :disabled="!editStatus">
              </el-date-picker>
            </el-form-item>
            <div class="clear"></div>

            <el-form-item label="13-生育日数" prop="breedingMethods">
              <el-input-number v-model="plotData.growingPeriod" :min="0" :max="10000" :disabled="!editStatus"
                               label="生育日数"></el-input-number>
            </el-form-item>
            <div class="clear"></div>
            <el-form-item label="14-块茎整齐度">
              <el-radio-group v-model="plotData.uniformityOfTuberSize" size="small" :disabled="!editStatus">
                <el-radio-button label="整齐"></el-radio-button>
                <el-radio-button label="中"></el-radio-button>
                <el-radio-button label="不整齐"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <div class="clear"></div>
            <el-form-item label="15-薯形" prop="longitude" :disabled="!editStatus">
              <el-select v-model="plotData.tuberShape" clearable placeholder="请选择">
                <el-option
                  v-for="item in tuberShaps"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <div class="clear"></div>
            <el-form-item label="16-薯皮光滑度">
              <el-radio-group v-model="plotData.skinSmoothness" size="small" :disabled="!editStatus">
                <el-radio-button label="光滑"></el-radio-button>
                <el-radio-button label="中"></el-radio-button>
                <el-radio-button label="粗糙"></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <div class="clear"></div>
            <el-form-item label="17-芽眼深浅">
              <el-radio-group v-model="plotData.eyeDepth" size="small" :disabled="!editStatus">
                <el-radio-button label="浅"></el-radio-button>
                <el-radio-button label="中"></el-radio-button>
                <el-radio-button label="深"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <div class="clear"></div>

            <el-form-item label="18-皮色" prop="longitude" :disabled="!editStatus">
              <el-select v-model="plotData.skinColour" clearable placeholder="请选择">
                <el-option
                  v-for="item in skinColours"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="19-肉色" prop="longitude" :disabled="!editStatus">
              <el-select v-model="plotData.fleshColour" clearable placeholder="请选择">
                <el-option
                  v-for="item in fleshColours"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <div class="clear"></div>
            <el-form-item label="20-是否入选">
              <el-switch
                v-model="plotData.isChoozen"
                active-text="是"
                inactive-text="否"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :disabled="!editStatus">
              </el-switch>
            </el-form-item>

            <div class="clear"></div>
            <el-form-item label="21-备注" prop="breedingInstitute" style="width: 700px">
              <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                v-model="plotData.remark" :disabled="!editStatus">
              </el-input>
            </el-form-item>

            <div class="clear"></div>
            <el-form-item label="22-收获株数" prop="releasingYear">
              <el-input-number v-model="plotData.harvestNum" :min="0" :max="10000" :disabled="!editStatus"
                               label="收获株数"></el-input-number>
            </el-form-item>
            <div class="clear"></div>

            <el-form-item label="23-大中薯数" prop="breedingMethods">
              <el-input-number v-model="plotData.lmNum" :min="0" :max="10000" :disabled="!editStatus"
                               label="大中薯数"></el-input-number>
            </el-form-item>
            <el-form-item label="24-大中薯重(0.00 kg)" prop="biologicalStatusOfAccession">
              <el-input-number v-model="plotData.lmWeight" precision="2" :min="0" :max="10000" :disabled="!editStatus"
                               label="大中薯重"></el-input-number>
            </el-form-item>
            <div class="clear"></div>

            <el-form-item label="25-小薯数" prop="breedingMethods">
              <el-input-number v-model="plotData.sNum" :min="0" :max="10000" :disabled="!editStatus"
                               label="小薯数"></el-input-number>
            </el-form-item>

            <el-form-item label="26-小薯重(0.00 kg)" prop="biologicalStatusOfAccession">
              <el-input-number v-model="plotData.sWeight" precision="2" :min="0" :max="10000" :disabled="!editStatus"
                               label="小薯重"></el-input-number>
            </el-form-item>
            <div class="clear"></div>


            <el-form-item label="27-商品薯率(%)" prop="breedingMethods">
              <el-input-number v-model="plotData.commercialRate" :min="0" :max="100" :disabled="!editStatus"
                               label="商品薯率">

              </el-input-number>
            </el-form-item>
            <div class="clear"></div>


            <el-form-item label="28-小区产量1(0.00 kg)" prop="biologicalStatusOfAccession">
              <el-input-number v-model="plotData.plotYield1" precision="2" :min="0" :max="10000" :disabled="!editStatus"
                               label="小区产量1"></el-input-number>
            </el-form-item>
            <div class="clear"></div>
            <el-form-item label="29-小区产量2(0.00 kg)" prop="biologicalStatusOfAccession">
              <el-input-number v-model="plotData.plotYield2" precision="2" :min="0" :max="10000" :disabled="!editStatus"
                               label="小区产量2"></el-input-number>
            </el-form-item>
            <div class="clear"></div>
            <el-form-item label="30-小区产量3(0.00 kg)" prop="biologicalStatusOfAccession">
              <el-input-number v-model="plotData.plotYield3" precision="2" :min="0" :max="10000" :disabled="!editStatus"
                               label="小区产量3"></el-input-number>
            </el-form-item>
            <div class="clear"></div>
            <el-form-item label="31-亩产量(0.00 kg)" prop="biologicalStatusOfAccession">
              <el-input-number v-model="plotData.acreYield" precision="2" :min="0" :max="10000" :disabled="!editStatus"
                               label="亩产量"></el-input-number>
            </el-form-item>
            <div class="clear"></div>


            <el-form-item label="32-十株的株高(以“-”符分隔)" prop="observationLocation" style="width: 700px">
              <el-input v-model="plotData.plantHeight10" @blur="getplantHeightAvg()" :disabled="!editStatus"></el-input>
            </el-form-item>
            <el-form-item label="33-平均株高" prop="observationLocation" style>
              <el-input v-model="plotData.plantHeightAvg" disabled="true"></el-input>
            </el-form-item>
            <div class="clear"></div>

            <el-form-item label="34-十株的分支数(以“-”符分隔)" prop="observationLocation" style="width: 700px">
              <el-input v-model="plotData.branchNumber10" @blur="getbranchNumberAvg()"
                        :disabled="!editStatus"></el-input>
            </el-form-item>
            <el-form-item label="35-平均分支数" prop="observationLocation" style>
              <el-input v-model="plotData.branchNumberAvg" disabled="true"></el-input>
            </el-form-item>
            <div class="clear"></div>

            <el-form-item label="36-十株测产(以“-”符分隔)" prop="observationLocation" style="width: 700px">
              <el-input v-model="plotData.yield10" :disabled="!editStatus"></el-input>
            </el-form-item>
            <!--
                      <el-form-item label="37-预留字段1" prop="observationLocation" style>
                        <el-input v-model="plotData.spare1" :disabled="!editStatus"></el-input>
                      </el-form-item>
                      <el-form-item label="38-预留字段2" prop="observationLocation" style>
                        <el-input v-model="plotData.spare2" :disabled="!editStatus"></el-input>
                      </el-form-item>
                      <div class="clear"></div>-->

            <!--<el-carousel :interval="4000" type="card" height="400px" style="max-width: 1000px; margin: auto">
              <el-carousel-item v-for="item in [curSpecies.img1, curSpecies.img2, curSpecies.img3]" :key="item">
                <img :src="item" style="width:100%; height: 100%"/>
              </el-carousel-item>
            </el-carousel>-->


            <!--
            <el-form-item label="活动区域" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="活动时间" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="即时配送" prop="delivery">
              <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质" prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="特殊资源" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="活动形式" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>-->


          </el-form>
        </el-col>

      </el-scrollbar>

    </el-main>
  </el-container>

</template>

<script>
  import {getSpeciesDetail, updateSpeciesDetail} from '@/api/SpeciesManage'
  import {getPlotData} from '@/api/FarmlandManage'

  export default {
    data() {
      var checkRate = (rule, value, callback) => {
        setTimeout(() => {
          var re = /^[0-9]+.?[0-9]*/;
          if (!re.test(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 0 || value > 100) {
              callback(new Error('出苗率必须在0~100之间(%)'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      return {
        tuberShaps: [
          {value: '扁圆', label: '扁圆'},
          {value: '圆形', label: '圆形'},
          {value: '卵形', label: '卵形'},
          {value: '倒卵', label: '倒卵'},
          {value: '扁椭圆', label: '扁椭圆'},
          {value: '椭圆', label: '椭圆'},
          {value: '长方', label: '长方'},
          {value: '长筒', label: '长筒'},
          {value: '棍棒', label: '棍棒'},
          {value: '楔形', label: '楔形'},
          {value: '肾形', label: '肾形'},
          {value: '纺锤', label: '纺锤'},
          {value: '镰刀', label: '镰刀'},
          {value: '卷曲', label: '卷曲'},
          {value: '掌状', label: '掌状'},
          {value: '手风琴', label: '手风琴'},
          {value: '结节', label: '结节'}
        ],
        skinColours: [
          {value: '乳白', label: '乳白'},
          {value: '浅黄', label: '浅黄'},
          {value: '黄', label: '黄'},
          {value: '褐', label: '褐'},
          {value: '浅红', label: '浅红'},
          {value: '红', label: '红'},
          {value: '深红', label: '深红'},
          {value: '紫', label: '紫'},
          {value: '深紫', label: '深紫'},
          {value: '锈色', label: '锈色'},
          {value: '红杂色', label: '红杂色'},
          {value: '蓝紫杂色', label: '蓝紫杂色'}
        ],
        fleshColours: [
          {value: '白', label: '白'},
          {value: '乳白', label: '乳白'},
          {value: '浅黄', label: '浅黄'},
          {value: '黄', label: '黄'},
          {value: '深黄', label: '深黄'},
          {value: '橙', label: '橙'},
          {value: '红', label: '红'},
          {value: '浅紫', label: '浅紫'},
          {value: '紫', label: '紫'},
          {value: '蓝紫', label: '蓝紫'},
          {value: '红纹或紫纹', label: '红纹或紫纹'}
        ],

        curSpecies: {},
        curPlot: {},
        pickerOptions1: {
          disabledDate(time) {
            return false;
            //return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        winHeight: window.innerHeught - 50,
        // speciesDetail: {},
        speciesDetail: {
          speciesId: '',
          accessionNumber: '',
          genebankNumber: '',
          introducingNumber: '',
          collectingNumber: '',
          accessionName: '',
          alienName: '',
          family: '',
          genus: '',
          species: '',
          countryOfOrigin: '',
          provinceOfOrigin: '',
          origin: '',
          altitude: '',
          longitude: '',
          latitude: '',
          sampleSource: '',
          donorInstitute: '',
          donorAccessionNumber: '',
          pedigree: '',
          breedingInstitute: '',
          releasingYear: '',
          breedingMethods: '',
          biologicalStatusOfAccession: '',
          imageFileName: '',
          observationLocation: '',
        },
        plotData: {
          speciesId: '',
          plantingDate: '',
          emergenceDate: '',
          sproutRate: '',
          squaringStage: '',
          blooming: '',
          leafColour: '',
          corollaColour: '',
          flowering: '',
          stemColour: '',
          openpollinated: '',
          maturingStage: '',
          growingPeriod: '',
          uniformityOfTuberSize: '',
          tuberShape: '',
          skinSmoothness: '',
          eyeDepth: '',
          skinColour: '',
          fleshColour: '',
          isChoozen: false,
          remark: '',
          harvestNum: 0,
          lmNum: 0,
          lmWeight: 0.0,
          sNum: 0,
          sWeight: 0.0,
          commercialRate: 0,
          plotYield1: 0.0,
          plotYield2: 0.0,
          plotYield3: 0.0,
          acreYield: 0.0,
          plantHeight10: '',
          plantHeightAvg: 0.0,
          branchNumber10: '',
          branchNumberAvg: 0.0,
          yield10: 0.0,
          spare1: '',
          spare2: ''
        },
        editStatus: false,
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          region: [
            {required: true, message: '请选择活动区域', trigger: 'change'}
          ],
          date1: [
            {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
          ],
          date2: [
            {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
          ],
          type: [
            {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
          ],
          resource: [
            {required: true, message: '请选择活动资源', trigger: 'change'}
          ],
          desc: [
            {required: true, message: '请填写活动形式', trigger: 'blur'}
          ]
        }
      }
    },

    created() {
      // 刚打开页面时就去取数据；
      // this.curSpecies = this.GLOBAL.species
      this.curPlot = this.GLOBAL.plot
      this.fetchData()
    },

    methods: {
      getplantHeightAvg() {
        console.log("**********************************" + this.plotData.plantHeight10)
        var ss = this.plotData.plantHeight10.split("-")
        var height = 0.00
        for (var j = 0, len = ss.length; j < len; j++) {
          height = height + parseFloat(ss[j])
          console.log(height)
        }
        this.plotData.plantHeightAvg = (height / ss.length).toFixed(2)
      },
      getbranchNumberAvg() {
        console.log("**********************************" + this.plotData.branchNumber10)
        var ss = this.plotData.branchNumber10.split("-")
        var height = 0.00
        for (var j = 0, len = ss.length; j < len; j++) {
          height = height + parseFloat(ss[j])
          console.log(height)
        }
        this.plotData.branchNumberAvg = (height / ss.length).toFixed(2)
      },
      fetchData() {
        this.listLoading = true
        // getSpeciesDetail({'speciesId': this.GLOBAL.species.speciesId}).then(response => {
        //   this.speciesDetail = response.data
        //   this.speciesDetail.speciesId = response.data.speciesId
        //   console.log(this.speciesDetail.speciesId)
        // })

        getPlotData({'plotId': this.GLOBAL.plot.plotId}).then(response => {
          this.plotData = response.data
          this.plotData.speciesId = response.data.speciesId
          console.log(this.plotData.speciesId)
        })
      },
      submitUpdation() {
        updateSpeciesDetail(this.speciesDetail).then(response => {
          if (response.data.isSuccess === "true") {
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          } else {
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          }

        })
      },
      returnAllSpecies() {
        this.$router.push("/speciesmodule/allspecies")
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success',
              duration: 2000
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .clear {
    clear: both;
  }

  .el-form-item {
    max-width: 600px;
    float: left;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>


